<div class="dash-nav">
  <ul>
    <li>
      <button type="button" class="btn" (click)="goToPage('Design')">
        <div class="icon">format_paint</div> {{'options.design.design' | translate}}
      </button>
    </li>
    <li>
      <button type="button" class="btn" (click)="goToPage('Time')">
        <div class="icon">access_time</div> {{'options.time.time' | translate}}
      </button>
    </li>
    <li>
      <button type="button" class="btn" (click)="goToPage('Date')">
        <div class="icon">insert_invitation</div> {{'options.date.date' | translate}}
      </button>
    </li>
    <li>
      <button type="button" class="btn" (click)="goToPage('Bookmarks')">
        <div class="icon">star</div> {{'options.bookmarks.headingBar' | translate}}
      </button>
    </li>
    <li>
      <button type="button" class="btn" (click)="goToPage('Search')">
        <div class="icon">search</div> {{'options.search.search' | translate}}
      </button>
    </li>
    <li>
      <button type="button" class="btn" (click)="goToPage('Message')">
        <div class="icon">textsms</div> {{'options.message.msg' | translate}}
      </button>
    </li>
    <li>
      <button type="button" class="btn" (click)="goToPage('Extra')">
        <div class="icon">settings</div> {{'options.extra.extra' | translate}}
      </button>
    </li>
  </ul>
</div>

<div class="donate">
  <div class="donate-intro">
    <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.6 30.6">
      <path d="M15.3 11c-1.2-3.5-8.7-4.5-9.2 1.6 -0.7 7.8 9.2 11.7 9.2 11.7s9.9-3.8 9.2-11.7C24 6.5 16.5 7.5 15.3 11zM10.1 19.1c-2.4-1.8-4.7-8.6 0.1-9.4C7.8 12 8.1 16.5 10.1 19.1z"/>
      <path d="M15.3 3.5c0.2 0 0.4-0.2 0.4-0.4V0.4C15.8 0.2 15.6 0 15.3 0s-0.4 0.2-0.4 0.4v2.7C14.9 3.3 15.1 3.5 15.3 3.5z"/>
      <path d="M15.3 27.1c-0.2 0-0.4 0.2-0.4 0.4v2.7c0 0.2 0.2 0.4 0.4 0.4s0.4-0.2 0.4-0.4v-2.6C15.8 27.3 15.6 27.1 15.3 27.1z"/>
      <path d="M8.8 5c0.1 0.1 0.2 0.2 0.4 0.2 0.1 0 0.2 0 0.2-0.1 0.2-0.1 0.3-0.4 0.2-0.6L8.3 2.2C8.1 2 7.9 1.9 7.7 2.1 7.4 2.2 7.4 2.4 7.5 2.7L8.8 5z"/>
      <path d="M21.8 25.7c-0.1-0.2-0.4-0.3-0.6-0.2 -0.2 0.1-0.3 0.4-0.2 0.6l1.3 2.3c0.1 0.1 0.2 0.2 0.4 0.2 0.1 0 0.2 0 0.2-0.1 0.2-0.1 0.3-0.4 0.2-0.6L21.8 25.7z"/>
      <path d="M2.2 8.3l2.3 1.3c0.1 0 0.1 0.1 0.2 0.1 0.2 0 0.3-0.1 0.4-0.2C5.2 9.2 5.2 8.9 5 8.8L2.7 7.5C2.4 7.4 2.2 7.4 2.1 7.7 1.9 7.9 2 8.1 2.2 8.3z"/>
      <path d="M28.4 22.4l-2.3-1.3c-0.2-0.1-0.5 0-0.6 0.2 -0.1 0.2-0.1 0.5 0.2 0.6l2.3 1.3c0.1 0 0.1 0.1 0.2 0.1 0.2 0 0.3-0.1 0.4-0.2C28.7 22.8 28.6 22.5 28.4 22.4z"/>
      <path d="M3.5 15.3c0-0.2-0.2-0.4-0.4-0.4H0.4C0.2 14.9 0 15.1 0 15.3s0.2 0.4 0.4 0.4h2.7C3.3 15.8 3.5 15.6 3.5 15.3z"/>
      <path d="M30.2 14.9h-2.6c-0.2 0-0.4 0.2-0.4 0.4s0.2 0.4 0.4 0.4h2.7c0.2 0 0.4-0.2 0.4-0.4S30.4 14.9 30.2 14.9z"/>
      <path d="M4.5 21l-2.3 1.3c-0.2 0.1-0.3 0.4-0.2 0.6 0.1 0.1 0.2 0.2 0.4 0.2 0.1 0 0.2 0 0.2-0.1l2.3-1.3c0.2-0.1 0.3-0.4 0.2-0.6C5 21 4.7 20.9 4.5 21z"/>
      <path d="M25.9 9.6c0.1 0 0.2 0 0.2-0.1l2.3-1.3c0.2-0.1 0.3-0.4 0.2-0.6 -0.1-0.2-0.4-0.3-0.6-0.2l-2.3 1.3c-0.2 0.1-0.3 0.4-0.2 0.6C25.6 9.6 25.7 9.6 25.9 9.6z"/>
      <path d="M9.4 25.5c-0.2-0.1-0.5-0.1-0.6 0.2l-1.3 2.3c-0.1 0.2 0 0.5 0.2 0.6 0.1 0 0.1 0.1 0.2 0.1 0.2 0 0.3-0.1 0.4-0.2l1.3-2.3C9.7 25.9 9.6 25.6 9.4 25.5z"/>
      <path d="M21.2 5.1c0.1 0 0.1 0.1 0.2 0.1 0.2 0 0.3-0.1 0.4-0.2l1.3-2.3c0.1-0.2 0.1-0.5-0.2-0.6C22.8 1.9 22.5 2 22.4 2.2l-1.3 2.3C20.9 4.7 21 5 21.2 5.1z"/>
    </svg>
    <p class="m0">
      {{'options.dashboard.supportDev' | translate}}
    </p>
  </div>
  <div class="mt1">
    <div class="share-it">
      <button class="btn" (click)="shareMenu = !shareMenu">
        <div class="icon">share</div>{{'options.dashboard.share' | translate}}
      </button>
      <div class="share-it_menu" *ngIf="shareMenu">
        <a href="https://twitter.com/intent/tweet?url=https://www.carettab.com/" class="btn btn-block">Twitter</a>
        <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.carettab.com/" class="btn btn-block">Facebook</a>
        <a href="http://www.linkedin.com/shareArticle?mini=true&url=https://www.carettab.com/" class="btn btn-block">LinkedIn</a>
        <a href="mailto:?body=https://www.carettab.com/" class="btn btn-block">Email</a>
      </div>
    </div>&nbsp;
    <a href="{{getReviewLink(false)}}" class="btn"><div class="icon">comment</div>{{'options.dashboard.review' | translate}}</a>&nbsp;
    <a href="https://paypal.me/bluecaret" class="btn"><div class="icon">attach_money</div>{{'options.dashboard.donate' | translate}}</a>&nbsp;
    <a href="https://github.com/bluecaret/carettab" class="btn"><div class="icon">code</div>{{'options.dashboard.contribute' | translate}}</a>&nbsp;
  </div>
</div>
<fieldset class="mb0">
  <legend class="mb0">{{'options.dashboard.new' | translate}}</legend>
  <p class="mt5">Updated August 22, 2020</p>
  <ul class="changelog">
    <li>CaretTab has been recreated from scratch to improve performance and stability!</li>
    <li>Clocks now have full customization! You can now set all settings on all clocks, give it a try!</li>
    <li>Change the order of clocks and quick links.</li>
    <li>More size options. Now most elements can be resized individually.</li>
    <li>Wallpaper options! Use some provided textures or your own custom image.</li>
    <li>Use any font installed on your machine!</li>
    <li>Display your browser's bookmarks bar on the new tab page.</li>
    <li>Lots more! take a look around and try things out.</li>
  </ul>
</fieldset>
<p>
  {{'options.dashboard.needHelp' | translate | translateCut:0 }}<a href="http://bluecaret.com">{{'options.dashboard.needHelp' | translate | translateCut:1 }}</a>{{'options.dashboard.needHelp' | translate | translateCut:2 }}<a href="http://twitter.com/bluecaret">{{'options.dashboard.needHelp' | translate | translateCut:3 }}</a>{{'options.dashboard.needHelp' | translate | translateCut:4 }}<a href="https://github.com/bluecaret/carettab">{{'options.dashboard.needHelp' | translate | translateCut:5 }}</a>{{'options.dashboard.needHelp' | translate | translateCut:6 }}
</p>
<p class="mb0"><small>
  <a href="https://www.carettab.com/">{{'options.dashboard.credit' | translate | translateCut:0 }}</a>{{'options.dashboard.credit' | translate | translateCut:1 }}<a href="http://bluecaret.com">{{'options.dashboard.credit' | translate | translateCut:2 }}</a>{{'options.dashboard.credit' | translate | translateCut:3 }}<a href="https://opensource.org/licenses/MIT">{{'options.dashboard.credit' | translate | translateCut:4 }}</a>{{'options.dashboard.credit' | translate | translateCut:5 }}
</small></p>


